<template>
    <el-container class="common-layout">
        <el-header>
            <Header />
        </el-header>
        <el-container>
            <el-aside width="200px">
                <Aside />
            </el-aside>
            <el-container>
                <el-main> <router-view /></el-main>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import Aside from '@/views/aside/index.vue'
import Header from '@/components/PHeader.vue'

export default {
    components: {
        'Aside': Aside,
        'Header': Header
    },
}
</script>


<style>
.common-layout {
    height: 100%;
}

.el-header {
    --el-header-padding: 0px 0px !important;
    padding: 0 0;
    border: none;
    border-bottom: none;
    height: 55px;
    z-index: 999;
    width: 100%;
}

.el-main {
    --el-main-padding: 20px;
    border: none;
    border-top: none;

}

.el-aside {
    height: 100%;

}

.el-container {
    width: 100%;
    border: none;
    height: 100%;
    /* position: fixed; */
    /* top: 0;
    right: 0;
    z-index: 9;
    transition: all 0.28s; */

    /* &.hidderContainer {
        width: calc(100% - 64px);
    } */
}
</style>